import React, { Component } from 'react';
import '../styles/ImgT.scss'
// import pic from '../assets/1.jpg'
import { withRouter } from 'react-router-dom';
import *as service from  '../api/api'
class ImgT extends Component {
    constructor(props) {
        super(props)
        this.state = {
            ssindex:0,
            header_info: [
                { name: '待接诊' },
                { name: '进行中' },
                { name: '已结束' },
            ],
            bottom_info: [
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
                // { title: '患者消息', pic, name: '李四', age: 18, sex: '女', wenzhengstatus: '极速问诊-视频', status: '待接诊', info: '最近一个月总是头晕，头痛，疲劳，心悸等，有时还会出现注意力不集中，记忆力减退，肢体麻木的现象' },
            ],
        }
    }
    async componentDidMount(){
        var res = await service.bottom_info({})
        console.log(res.data);
        this.setState({bottom_info:res.data})
    }
    async indexClick(index){
        this.setState({ssindex:index})
        if(index ===0){
            var res = await service.bottom_info({})
            console.log(res.data);
            this.setState({bottom_info:res.data})

        }
        if(index ===1){
            var res2 = await service.bottom_infos({})
            console.log(res2.data);
            this.setState({bottom_info:res2.data})
        }
        if(index ===2){
            var res3 = await service.bottom_infoss({})
            console.log(res3.data);
            this.setState({bottom_info:res3.data})
        }
    }
    fanClick() {
        this.props.history.go(-1)
    }
    render() {
        return (
            <div className='imgt'>
                <div className="top">
                    <h3 onClick={()=>{this.fanClick()}}>&lt; 图文问诊</h3>
                </div>
                <div className="list">
                    {
                        this.state.header_info.map((item,index)=>{
                            return(
                                <p className={'pps' + (this.state.ssindex === index ? 'active':'')} key={index} onClick={()=>{this.indexClick(index)}}>{item.name}</p>
                            )
                        })
                    }
                </div>
                <div className="bottom1">
                        {
                            this.state.bottom_info.map((item, index) => {
                                return (
                                    <div className="bottom" key={index}>
                                        <div className="bottom_main">
                                            <div className="top">
                                                <img src={item.pic} alt="" />
                                                <span>{item.name}</span>
                                                <span className='span1'>{item.sex}</span>
                                                <span className='span1'>{item.age}</span>
                                                <span className='span2'>{item.wenzhengstatus}</span>
                                                <span className='span3'>{item.status}</span>
                                            </div>
                                            <div className="bom">
                                                <p>病情描述:&emsp;<span>{item.info}</span></p>
                                            </div>
                                            <div className="bomms">
                                                <p>20分钟</p>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
            </div>
            
        );
    }
}

export default withRouter(ImgT);